<template>
    <div class="empty-state">
        <div class="empty-icon">
            <el-icon :size="iconSize">
                <component :is="icon" />
            </el-icon>
        </div>
        <h3 class="empty-title">{{ title }}</h3>
        <p class="empty-description">{{ description }}</p>
        <div class="empty-actions" v-if="$slots.actions">
            <slot name="actions" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { Box } from '@element-plus/icons-vue'
import type { Component } from 'vue'

interface Props {
    title?: string
    description?: string
    icon?: string | Component
    iconSize?: number
}

withDefaults(defineProps<Props>(), {
    title: '暂无数据',
    description: '当前没有相关数据',
    icon: Box,
    iconSize: 64
})
</script>

<style scoped>
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-icon {
    color: #c0c4cc;
    margin-bottom: 20px;
}

.empty-title {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.empty-description {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.empty-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
</style>
